<template>
	<view class="box">
		<block v-if="!isRegister">
			<view class="flex a-c item">
				<view class="label f1">设置头像</view>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="uploadHead">
					<image class="avatar" :src="loginData.avatar" mode="aspectFill" />
				</button>
			</view>
			<view class="flex a-c item">
				<view class="label">设置昵称</view>
				<input type="nickname" class="weui-input" @input="getName" @blur="getName" placeholder="请输入昵称或授权微信昵称" />
			</view>
		</block>
		
		<label class="flex a-c radio" @click="isAgree = !isAgree">
			<radio :checked="isAgree" color="#2E80FE" style="transform: scale(0.8);" />我已阅读并同意
			<text style="color: #2E80FE;" @click.stop="toDetail">《用户协议及隐私政策》</text>
		</label>

		<view class="login-btn-box">
			<button open-type="getPhoneNumber" class="btn green" v-if="isNew" @getphonenumber="getPhone">授权手机号</button>
			<button type="primary" @click="testLogin" class="btn" v-else>授权登录</button>
		</view>
	</view>
</template>

<script>
	import config from "@/libs/config.js"
	export default {
		data() {
			return {
				// avatar: '',
				nickName: '',
				loginData: {
					avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
					sex: '',
					nickName: '',
					headimgurl: ''
				},
				registerkey: '',
				isNew: false,
				BASE_URL: config.baseUrl,
				isBack: false,
				noClick:true,
				isAgree: false,
				isRegister: 0,
			}
		},
		onLoad() {
			this.isRegister = uni.getStorageSync('isRegister');
			if(this.isRegister) {
				this.isAgree = true;
			}
		},
		methods: {
			uploadHead(e) {
				var filePath = e.detail.avatarUrl;
				uni.uploadFile({
					url: `${this.BASE_URL}api/front/upload/image?pid=7&model=user`,
					filePath,
					name: 'multipart',
					header: {
						'Authori-zation': uni.getStorageSync('token'),
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						console.log(res, "res----")
						const resData = JSON.parse(res.data)
						if (resData.code == 200) {
							this.loginData.avatar = resData.data.url;
							this.loginData.headimgurl = resData.data.url;
						} else {
							this.showToast(resData.message)
						}
					},
					fail: (err) => {
						console.log('失败：', err)
					}
				});
			},
			getName(e) {
				this.loginData.nickName = e.detail.value;
			},
			getPhone(e) {
				var that = this;
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						that.newUserRegister(e, loginRes.code);
					}
				})
			},

			async testLogin() {
				if(!this.isAgree) {
					uni.showToast({
						title: '请先阅读勾选协议',
						icon: 'none'
					});
					return 
				}
				var code = '',that = this;
				uni.showLoading();
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						uni.hideLoading()
						code = loginRes.code;
						that.toLogin(code);
					},
					fail: (err) => {
						uni.hideLoading();
					}
				})
			},
			async toLogin(code) {
				const res = await this.$api.post(`wechat/authorize/program/login?code=${code}`, this.loginData);
				if (res.code == 200) {
					var token = res.data.token;
					if (token) {
						uni.setStorageSync('token', token);
						if(!this.isBack) {
							this.isBack = true;
							uni.navigateBack()
							setTimeout(v => {
								this.showToast('登录成功');
								uni.setStorageSync('isRegister',1)
							}, 500);
						}
					} else {
						this.registerkey = res.data.key;
						uni.showModal({
							title: '温馨提示',
							content: '首次登录需授权手机号哟',
							showCancel: false,
							complete: (v) => {
								this.isNew = true
							}
						})
					}
				}
			},
			async newUserRegister({ detail }, code) {
				const res = await this.$api.post('wechat/register/binding/phone', {
					code,
					encryptedData: detail.encryptedData,
					iv: detail.iv,
					key: this.registerkey,
					type: "routine",
				});
				if (res.code == 200) {
					var token = res.data.token;
					if (token) {
						uni.setStorageSync('token', token);
						if(!this.isBack) {
							this.isBack = true;
							uni.navigateBack()
							setTimeout(v => {
								this.showToast('登录成功');
								uni.setStorageSync('isRegister',1)
							}, 500);
						}
					}
				}
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/index/class_detail?type=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		// height: 100vh;
		// transform: translate(0, 80%);
		padding-top: 20vh;

		.flex {
			display: flex;
			flex-direction: row;
		}

		.a-c {
			align-items: center;
		}

		.f1 {
			flex: 1;
		}

		.label {
			font-size: 28rpx;
			color: #555555;
			width: 240rpx;
		}

		.avatar-wrapper {
			background-color: #ffffff;
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin: 0 !important;
			padding: 0 !important;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				background-color: #F2F2F2;
				z-index: 99;
			}
		}

		.weui-input {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
		}

		.item {
			margin: 30rpx;
			padding: 30rpx;
			border-radius: 16rpx;
			border: 1rpx solid #ddd;
			margin-top: 0;
		}

		.btn {
			margin: 30rpx;
			background: #13ce51;
			border-radius: 12rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 30rpx;
			color: #FFF;
		}
		
		.green {
			background: #2E80FE;
		}
		
		.radio {
			justify-content: center;
			font-size: 28rpx;
			position: fixed;
			left: 0;
			bottom: 80rpx;
			right: 0;
		}
	}
</style>